<template>
    <div class="page-person">
        <div class="div1">我的个人中心</div>
        <div class="div2">
            <div class="div2_1">{{comp_username.charAt(0)}}</div>
            <div class="div2_2">
                <span class="span1">{{comp_username}}</span>
                <span class="span2">{{comp_phone}}</span>
            </div>
            <div class="div2_3">
                <span>未认证</span>
                
                <div><img class="img2" src="/public/img/person/arrow.jpg" alt=""></div>
                <div><img class="img3" src="/public/img/person/domand.png" alt=""></div>
            </div>
        </div>
        <div class="div3">
            <ul>
                <li><div><span class="sp1">0</span>
                    <span class="sp2">邀请人数</span></div></li>
                <li><div><span class="sp1">{{comp_count}}</span>
                    <span class="sp2">预约数</span></div></li>
                <li><div><span class="sp1">0</span>
                    <span class="sp2">夜郎币</span></div></li>
                <li><div><span class="sp1">0</span>
                    <span class="sp2">积分</span></div></li>
            </ul>
        </div>
        <ul class="div4">
            <li>
                <div class="div4_1"></div>
				<router-link class="div4_2" tag='div' to="/invite">邀请二维码</router-link>
                <div class="div4_3"><i></i></div>
            </li>
            <li>
                <div class="div4_4"></div>
				<router-link class="div4_2" tag='div' to="/myInvite">我的客户</router-link>
                <div class="div4_3"><i></i></div>
            </li>
            <li>
                <div class="div4_7"></div>
				<div class="div4_2" @click="attest">收益统计</div>
                <div class="div4_3"><i></i></div>
            </li>
            <li>
                <div class="div4_11"></div>
				<div class="div4_2" @click="attest">我的资产</div>
                <div class="div4_3"><i></i></div>
            </li>
            <li>
                <div class="div4_14"></div>
				<router-link class="div4_2" tag='div' to="/person1">个人基本信息</router-link>
                <div class="div4_3"><i></i></div>
            </li>
            <li>
                <div class="div4_17"></div>
				<router-link class="div4_2" tag='div' to="/risk">风险测评</router-link>
                <div class="div4_3"><i></i></div>
            </li>
            <li>
                <div class="div4_17"></div>
				<router-link class="div4_2" tag='div' to="/integral">积分兑换商品</router-link>
                <div class="div4_3"><i></i></div>
            </li>
            <li>
                <div class="div4_17"></div>
				<router-link class="div4_2" tag='div' to="/setting">设置</router-link>
                <div class="div4_3"><i></i></div>
            </li>
            <li>
                <div class="div4_17"></div>
               <router-link class="div4_2" tag='div' to="/about">关于</router-link>
                <div class="div4_3"><i></i></div>
            </li>
			<li class="last"></li>
        </ul>
    <bottomNav></bottomNav>
    </div>
</template>


<style lang="scss">
* {
	margin: 0;
	padding: 0;
	list-style: none;
}
.page-person {
	box-sizing: border-box;
	width: 100%;
	background-color: #fff;
	.div1 {
		height: 56px;
		border-bottom: 1px solid #e3e3e3;
		background-color: #00b9f7;
		text-align: center;
		line-height: 56px;
		font-size: 20px;
		color: #fff;
	}
	.div2 {
		width: 100%;
		height: 88px;
		padding-top: 14px;
		border-bottom: 1px solid #e3e3e3;
		overflow: hidden;
		display: flex;
		position: relative;
		.div2_1 {
			float:left;
			width: 55px;
			height: 55px;
			margin-left: 10px;
			background-color: blue;
			border-radius: 50%;
			font-size: 24px;
			text-align: center;
			line-height: 55px;
		}
		.div2_2 {
			float:left;
			display: flex;
			flex: 1;
			flex-flow: column;
			min-width: 110px;
			height: 55px;
			padding-left: 10px;
			background-color: transparent;
			font-size: 14px;
			.span1 {
				margin-top: 5px;
				margin-left: 8px;
				font-size: 16px;
				font-weight: bold;
			}
			.span2 {
				margin-top: 3px;
				margin-left: 8px;
			}
		}
		.div2_3 {
			float: right;
			position: relative;
			width: 96px;
			height: 55px;
			border-radius: 22px 0 0 22px;
			background-color: #ff7f00;
			color: #fff;
			span {
				margin-left: 30px;
				line-height: 50px;
				font-size: 16px;
			}
			.img2 {
				position: absolute;
				right: 5px;
				top: 20px;
				display: block;
			}
			.img3 {
				position: absolute;
				right: 70px;
				top: 5px;
				width: 15px;
				height: 15px;
			}
		}
		.div2_3:after {
			content: "";
			clear: both;
			visibility: hidden;
			height: 0;
		}
		.div2_3:hover {
			cursor: pointer;
		}
	}
	.div3 {
		height: 104px;
		border-bottom: 1px solid #e3e3e3;
		li {
			text-align: center;
			float: left;
			width: 25%;
			height: 104px;
			background-color: transparent;
			div {
				width: 100%;
				display: flex;
				flex-flow: column;
				align-items: center;
				height: 100%;
				justify-content: center;
				.sp1, .sp2 {
					font-size: 14px;
				}
				.sp1 {
					color: orange;
				}
				.sp2 {
					margin-top: 5px;
				}
			}
		}
		li:last-child {
			border-bottom: 1px solid #c0c0c0;
		}
	}
	.div4 {
		li {
			width: 100%;
			height: 48px;
			box-sizing: border-box;
			padding: 0 10px;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #e3e3e3;
			.div4_1,.div4_4,.div4_7,.div4_11,.div4_14,.div4_17 {
				width: 56px;
				height: 47px;
			}
			.div4_1 {
				background-image: url('/public/img/person/icon_1.png');
			}
			.div4_4 {
				background-image: url('/public/img/person/icon_2.png');
			}
			.div4_7 {
				background-image: url('/public/img/person/icon_3.png');
			}
			.div4_11 {
				background-position: 0px -1px;
				background-image: url('/public/img/person/icon_4.png');
			}
			.div4_14 {
				background-image: url('/public/img/person/icon_5.png');
			}
			.div4_17 {
				background-image: url('/public/img/person/icon_6.png');
			}
			.div4_2 {
				width: 85%;
				height: 48px;
				font-size: 16px;
				line-height: 48px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.div4_3 {
				width: 56px;
				height: 48px;
				i {
					position: relative;
					left: 20px;
					display: block;
				}
				i:before, i:after {
					position: absolute;
					right: 5px;
					top: 16px;
					width: 0;
					height: 0;
					content: '';
					border: 8px solid transparent;
					border-left: 8px solid #333;
				}
				i:after {
					right: 8px;
					border-left: 8px solid #fff;
				}
			}
			
		}
		li:hover {
			background-color: #e5e5e5;
			cursor: pointer;
			.div4_1 {
				background-position: -3px 0px;
				background-image: url('/public/img/person/001.jpg');
			}
			.div4_4 {
				background-position: -4px -1px;
				background-image: url('/public/img/person/002.jpg');
			}
			.div4_7 {
				background-position: -3px 0px;
				background-image: url('/public/img/person/003.jpg');
			}
			.div4_11 {
				background-position: -3px -1px;
				background-image: url('/public/img/person/004.jpg');
			}
			.div4_14 {
				background-position: -4px -1px;
				background-image: url('/public/img/person/005.jpg');
			}
			.div4_17 {
				background-position: -4px 0px;
				background-image: url('/public/img/person/006.jpg');
			}
			.div4_3 {
				i:after {
					right: 8px;
					border-left: 8px solid #e5e5e5;
				}
			}
		}
		li.last {
			height: 55px;
		}
	}
}
</style>

<script>
	// 引入新的Message组件
	// import Message from 'muse-ui-message';
	// // 修改默认配置
	// Message.config( { okLabel: '马上认证', cancelLabel: '稍后认证' } );
    // 引入底部导航组件
    import BottomNav from '@c/BottomNav';
    // 暴露接口
    export default {
        // 注册组件
		components: { BottomNav },
		// 数据
		data() {
			return {
				username: '',
				phone: '12345678901',
				book_count: 0,
				book_total: 0
			}
		},
		// 计算属性数据
		computed: {
			comp_phone() {
				this.phone = this.phone || '-----------';
				// 截取数组，转成字符串
				var arr = this.phone.split('');
				arr.splice(3, 4, '*', '*', '*', '*');
				return arr.join('');
			},
			// 获取未登录时用户
			comp_username() {
				this.username = this.username || '未填写姓名';
				return this.username;
			},
			// 获取未登录时count
			comp_count() {
				this.book_count = this.book_count || 0;
				return this.book_count;
			}
		},
		/* 生命周期方法 */
		// 组件创建前
		beforeCreate() {
			// 检测 token 是否存在
			localStorage.getItem('token') || this.$router.push('/login');
		},
		// 组件创建完成
		created() {
			this.$http({
				url: '/api/user/getMyselfInfo',
				method: 'POST'
			})
			.then(({ data }) => {
				this.update(data.data);
			})
		},
		// 自定义方法
		methods: {
			// 更新方法
			update(data) {
				this.username = data.username;
				this.phone = data.phone;
				this.book_count = data.book_count;
				this.book_total = data.book_total;
			},
			attest() {
				// 认证提示
				this.$confirm(
					'您还没有认证，请先认证',
					'提示',
					{ type: 'warning' },
				)
				// 添加监听
				.then(({ result }) => {
					if(result) {
						this.$router.push('/attestation');
					}
				})
				
			}
		}
    }
</script>